<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>简单跑酷游戏画面</title>  
<style>  
  body {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    height: 100vh;  
    margin: 0;  
    background-color: #f0f0f0;  
  }  
  
  .game {  
    position: relative;  
    width: 400px;  
    height: 200px;  
    border: 2px solid #000;  
    overflow: hidden;  
    background-color: #ddd;  
  }  
  
  .ground {  
    position: absolute;  
    bottom: 0;  
    width: 100%;  
    height: 50px;  
    background-color: #888;  
  }  
  
  .player {  
    position: absolute;  
    bottom: 50px; /* Just above the ground */  
    left: 50px;  
    width: 30px;  
    height: 30px;  
    background-color: blue;  
    border-radius: 50%;  
  }  
  
  .obstacle {  
    position: absolute;  
    width: 30px;  
    height: 30px;  
    background-color: red;  
    border-radius: 50%;  
    animation: moveObstacle 5s linear infinite;  
  }  
  
  @keyframes moveObstacle {  
    0% { transform: translateX(100%); }  
    100% { transform: translateX(-100%); }  
  }  
</style>  
</head>  
<body>  
  
<div class="game">  
  <div class="ground"></div>  
  <div class="player"></div>  
  <div class="obstacle"></div>  
</div>  
  
</body>  
</html>